<template>
    <div>
        <el-date-picker
            v-model="Time.month"
            type="date"
            placeholder="选择日期"
            size="small"
            :disabled-date="beginDateBefore"
            style="margin-right: 20px"
            @change="TimeChange">
        </el-date-picker>
        <el-time-picker
            v-model="Time.time"
            type="date"
            placeholder="请输入时间"
            size="small"
            :disabled-hours="disableHour"
            :disabled-minutes="disableMin"
            @change="TimeChange">
        </el-time-picker>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import dayjs from 'dayjs';

const emit = defineEmits(['dateTime']);
const hour = ref(0);
const beginDateBefore = (item: any) => {
    return dayjs(item).valueOf() < new Date(new Date(new Date().toLocaleDateString()).getTime());
};
const makeRange = (start: number, end: number) => {
    const result: number[] = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
};
const disableHour = () => {
    if (Time.month == '' || Time.month - new Date(new Date(new Date().toLocaleDateString()).getTime()) == 0) {
        const Hour = new Date().getHours();
        hour.value = Hour;
        return makeRange(0, Hour);
    } else {
        return [];
    }
};
const disableMin = (time: number) => {
    if (Time.month == '' || Time.month - new Date(new Date(new Date().toLocaleDateString()).getTime()) == 0) {
        if (time > hour.value) {
            return makeRange(0, 0);
        } else {
            const Min = new Date().getMinutes();
            return makeRange(0, Min);
        }
    } else {
        return [];
    }
};

const Time = reactive({
    month: '',
    time: ''
});

const WX_time = ref('');

const TimeChange = () => {
    if (!Time.month && !Time.time) return;
    const years = Time.month.getFullYear();
    const month = Time.month.getMonth() + 1;
    const day = Time.month.getDate();
    const hour = Time.time.getHours();
    const minutes = Time.time.getMinutes();
    const seconds = Time.time.getSeconds();

    const time = `${years}-${month}-${day} ${hour}:${minutes}:${seconds}`;

    emit('dateTime', time);
};
</script>

<style lang="scss" scoped></style>
